<template>
	<comRoot :isShowLimitWarm="true" @execAfterToken="setReloadFun('token')">
		<template #page>
			<comDetailNavigateBack :title="commonNavTitle" />
			
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" />
			
			<view class="reward-page relative">
				<view
					class="reward-info-content relative"
					:style="{
						height: `calc(100vh - ${commonNavHeight})`,
					}"
				>
					<view class="right-side-page">
						<view class="tab-boxes-icon fixed">
							<button class="trans-button" open-type="share" @click="share">
								<image
									class="oper-btn-icon"
									v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/common/ico-share.png`"
									mode=""
								></image>
							</button>
							<image
								class="oper-btn-icon"
								v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/common/ico-desc.png`"
								mode=""
								@click="setShowRuleFun"
							></image>
						</view>
						<view class="goto-pages-icon fixed flex-direction-column flex-align-items-center">
							<image
								class="oper-btn-icon"
								style="width: 69rpx;height: 68rpx;"
								v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/common/ico-prev.png`"
								mode=""
								@click="setReplaceBoxFun('prev')"
							></image>
							<image
								class="oper-btn-icon"
								style="width: 69rpx;height: 68rpx;"
								v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/common/ico-next.png`"
								mode=""
								@click="setReplaceBoxFun('next')"
							></image>
							<image
								class="oper-btn-icon"
								v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/common/ico-refresh.png`"
								mode=""
								@click="setReloadFun('loading')"
							></image>
							<image
								class="oper-btn-icon"
								v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/common/ico-bag.png`"
								mode=""
								@click="gooPageUrl('/secondary/bagPage/bagPage')"
							></image>
						</view>
					</view>

					<view class="reward-pk-box realtive" v-if="type === 'pk'">
						<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/pk-bg.png`" class="bg reward-pk-img" />
						<view class="reward-pk-one absolute flex">
							<view class="reward-pk-info relative flex-all-center" v-for="(item, index) in rewardData.p_team" :key="index">
								<image class="pk-info-img relative" :src="item.avatar" mode=""></image>
								<!-- <image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/hot-bg.png`" class="bg" /> -->
							</view>
						</view>
						<view class="reward-pk-two absolute flex">
							<view class="reward-pk-info relative flex-all-center" v-for="(item, index) in rewardData.k_team" :key="index">
								<image class="pk-info-img relative" :src="item.avatar" mode=""></image>
								<!-- <image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/cool-bg.png`" class="bg" /> -->
							</view>
						</view>
					</view>

					<view class="reward-all-box margin-auto relative" v-if="rewardData">
						<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/content-bg.png`" class="bg" />
						<view class="reward-all-cover absolute flex-all-center">
							<image class="reward-all-img relative" :src="rewardData.reward_pool_detail_image" mode="heightFix"></image>
							
							<image class="bg" 
								style="width: 299rpx;height: 299rpx;" 
								v-if="commonConfigs && commonConfigs.domainFrontFileLink && rewardData.is_person_lockstatus"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/cover-lock-img.png`"
								mode="heightFix"></image>
						</view>
						<view class="reward-all-sums absolute">
							<view class="all-sums-txt relative flex-all-center">
								<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/dot.png`" class="all-sums-icon" />
								<text class="all-sums-desc">第{{ boxSubIndex }}/{{ rewardData.total_box_num }}箱</text>
								<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/dot.png`" class="all-sums-icon" style="transform: scaleX(-1);" />
							</view>
						</view>
						<view class="reward-all-detail absolute">
							<view class="reward-all-info truncate font-hanserif-bold">{{ rewardData.reward_pool_name }}</view>
							<view class="reward-all-price relative flex-align-items-center">
								<image
									v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/ico-price.png`"
									class="all-price-icon relative"
								/>
								<text class="all-price-txt relative">
									<text class="all-price-unit">￥</text>
									<text>{{ rewardData.reward_price_1 }}/抽</text>
								</text>
							</view>
							<view class="reward-all-process relative">
								<view class="all-process-box relative" :style="{ width: numCalculation(rewardData.total_remain_stock_num, rewardData.total_stock_num) * 100 + '%' }"> </view>
							</view>
							<view class="reward-all-total relative" v-if="rewardData && rewardData.reward_pool_name"> 
								剩余库存：{{ rewardData.total_remain_stock_num || 0 }}/{{ rewardData.total_stock_num || 0 }} 
							</view>
							<view class="reward-all-boxes relative flex">
								<view class="all-boxes-oper flex" :class="setChangeBoxFun('prev') ? '' : 'active'" @click="setReplaceBoxFun('prev')">
									<view class="boxes-oper-btn flex-all-center">
										<image
											class="boxes-tab-btn"
											v-if="commonConfigs && commonConfigs.domainFrontFileLink"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/box-prev.png`"
											mode=""
										></image>
									</view>
									<view class="boxes-oper-txt">上一箱</view>
								</view>
								<view class="all-boxes-oper flex guide2" @click="setReplaceBoxFun">
									<view class="boxes-oper-btn flex-all-center">
										<image
											class="boxes-replace-btn"
											v-if="commonConfigs && commonConfigs.domainFrontFileLink"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/box-refresh.png`"
											mode=""
										></image>
									</view>
									<view class="boxes-oper-txt">换箱</view>
								</view>
								<view class="all-boxes-oper flex" :class="setChangeBoxFun('next') ? '' : 'active'" @click="setReplaceBoxFun('next')">
									<view class="boxes-oper-btn flex-all-center">
										<image
											class="boxes-tab-btn"
											v-if="commonConfigs && commonConfigs.domainFrontFileLink"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/box-next.png`"
											mode=""
										></image>
									</view>
									<view class="boxes-oper-txt">下一箱</view>
								</view>
							</view>
						</view>
					</view>
					
					<view v-if="rewardData.is_open_intercept" class="lock-tips-content relative font-hanserif-bold flex-direction-column">
						<image
							v-if="commonConfigs && commonConfigs.domainFrontFileLink"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/openbox/lock_tips_box.png`"
							class="bg"
						/>
						
						<view class="relative lock-tip-txt">
							该箱剩余
							<text> {{ rewardData.intercept_last_num || 0 }}抽 </text>
							后锁箱，时效
							<text> {{ rewardData.intercept_continue || 0 }}分钟 </text>
							。达到
							<text> {{ rewardData.no_intercept_threshold || 0 }}抽 </text>
							的玩家时效内有专属购买权，其他人需等倒计时结束才能抽赏。
						</view>
						
						<view class="absolute lock-tip-btn flex-align-items-center flex-justify-content-between">
							<view class="lock-btn-left flex-align-items-center">
								<view class="lock-btn-label">个人已抽：</view>
								<view class="lock-btn-num">{{ rewardData.cur_uid_sale_num }}</view>
							</view>
							
							<view class="lock-btn-right flex-align-items-center">
								<view class="lock-btn-label">锁箱状态：</view>
								<view v-if="rewardData.is_lockstatus" class="lock-btn-num">
									<!-- 已锁箱 -->
									 <view v-if="countdownObj.flag" class="lock-downtime-box flex-all-center font-hanserif-bold">
									 	<view class="lock-downtime-txt relative flex-all-center">
									 		<image
									 			class="bg"
									 			v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									 			:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/downtime-bg.png`"
									 		/>
									 		
									 		<!-- <view class="flex-end flex-align-items-center relative">
									 			<text>倒&nbsp;计&nbsp;时：</text>
									 		</view> -->
											
									 		<view class="flex relative time-box">
									 			<text class="flex-all-center">{{ countdownObj.h }}</text>
									 			:
									 			<text class="flex-all-center">{{ countdownObj.m }}</text>
									 			:
									 			<text class="flex-all-center">{{ countdownObj.s }}</text>
									 		</view>
									 	</view>
									 </view>
								</view>
									
								<view v-else class="lock-btn-num">未锁箱</view>
								
							</view>
						</view>
						
					</view>
					
					<view class="reward-detail relative">
						<view class="detail-tip-box flex-align-items-center" v-if="rewardData.tips">
							<image class="tip-box-txt" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/infinite/tips.png`" mode=""></image>
							<text>{{ rewardData.tips || '尊敬的用户，您购买的赏品将随机附赠下列赠品' }}</text>
						</view>
						
						<view class="detail-tab-btns flex margin-auto flex-justify-content-center flex-justify-content-between" :style="{ position: 'sticky1', left: 0, top: 0, 'z-index': 1000, background1: 'rgba(0, 0, 0, 0.6)' }">
							<view
								class="detail-tab-btn-txt relative flex-align-items-center font-hanserif-bold"
								:class="currentTabType === item.type ? 'active' : ''"
								v-for="(item, index) in tabAreaList"
								:key="index"
								@click="setTabAreaFun(item)"
							>
								<image
									class="bg"
									v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/common/${currentTabType === item.type ? 'tabarea-item-active' : 'tabarea-item'}.png`"
									mode=""
								></image>
								<text class="relative font-hanserif-regular">{{ item.name }}</text>
							</view>
						</view>

						<view class="detail-pool">
							<!-- 预览0 Hot4 Cool5 夺宝7 -->
							<template v-if="currentTabType === 0 || currentTabType === 4 || currentTabType === 5 || currentTabType === 7">
								<view v-if="!rewardPoolInfo && !rewardPoolInfo.reward_item.length" style="width: 100%; height: 100%;">
									<comEmptyData></comEmptyData>
								</view>
								<view class="detail-pool-info relative flex" v-if="rewardPoolInfo && rewardPoolInfo.reward_item">
									<view class="detail-pool-content relative" v-for="(item, index) in rewardPoolInfo.reward_item" :key="index" @click="gooShopDetailFun(item, index, 'reward')">
										
										<view class="detail-pool-cover relative flex-all-center">
											<image
												class="bg absolute"
												v-if="commonConfigs && commonConfigs.domainFrontFileLink"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/goods-bg.png`"
												mode=""></image>
											<image
												class="bg absolute"
												style="width: 162rpx;height: 162rpx;z-index: 10;"
												v-if="commonConfigs && commonConfigs.domainFrontFileLink && rewardData.is_person_lockstatus"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/reward-lock-img.png`"
												mode=""></image>
											
											<comPlaceImage
												class="detail-pool-img"
												placeImageClass="flex-all-center"
												:lazyLoad="true"
												:src="item.reward_item_cover"
												mode="heightFix"
											></comPlaceImage>
											<image
												class="detail-pool-tip absolute"
												v-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type.toLowerCase() === 'hot'"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/hot-icon.png`"
												mode="heightFix"
											></image>
											<image
												class="detail-pool-tip absolute"
												v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type.toLowerCase() === 'cool'"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/cool-icon.png`"
												mode="heightFix"
											></image>
											<image
												class="detail-pool-tip absolute"
												v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '全局'"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/all-icon.png`"
												mode="heightFix"
											></image>
											<image
												class="detail-pool-tip absolute"
												v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type.toLowerCase() === 'first'"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/first-icon.png`"
												mode="heightFix"
											></image>
											<image
												class="detail-pool-tip absolute"
												v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type.toLowerCase() === 'last'"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/last-icon.png`"
												mode="heightFix"
											></image>
											<image
												class="detail-pool-tip absolute"
												v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '夺宝'"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/treasure-icon.png`"
												mode="heightFix"
											></image>
											<image
												class="detail-pool-tip absolute"
												v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '叠叠'"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/stacking-icon.png`"
												mode="heightFix"
											></image>
											<image
												class="detail-pool-tip absolute"
												v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '冲冲'"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/flush-icon.png`"
												mode="heightFix"
											></image>
											<image
												class="detail-pool-tip absolute" style="z-index: 56;"
												v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '普通'"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/ordinary-icon.png`"
												mode="heightFix"
											></image>
											<image class="detail-pool-type absolute" v-else 
											:src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/level-` + (item.reward_item_type && item.reward_item_type.toLowerCase()) + '.png'"
											mode="heightFix"></image>
										</view>
										<view class="detail-pool-title" v-if="showNoticeTxtFun(item.reward_item_name, 8)" style="margin-top: 10rpx">
											<uni-notice-bar
												class="uni-notice-bar"
												color="#FFF"
												background-color="transparent"
												:scrollable="true"
												:single="true"
												:text="showNoticeTxtFun(item.reward_item_name, 8)"
												:speed="54"
											></uni-notice-bar>
										</view>
										<view class="detail-pool-title truncate" v-else>{{ item.reward_item_name }}</view>
										<!-- 预览0 Hot4 Cool5 夺宝7 -->
										<view class="detail-pool-title detail-pool-rate truncate" v-if="[0, 4, 5, 7].includes(currentTabType)">
											实时概率：
											<text v-if="item.is_give">赠品</text>
											<text v-else>{{ item.reward_rate }}</text>
										</view>
										<view v-if="![4, 5, 7].includes(currentTabType)" class="detail-pool-title text-nowrap detail-pool-nums">{{ item.remain_stock_num }}/{{ item.each_box_stock_num }}</view>
									</view>
								</view>
							</template>

							<template v-else-if="currentTabType === 1">
								<scroll-view scroll-y @scrolltolower="scrolltolower" :style="{
									height: 'calc(100vh - ' + commonNavHeight + ' - 358rpx - 72rpx - 264rpx - 26rpx)'
								}" class="detail-rate-info relative margin-auto">
									<view v-if="!resLists.length" style="width: 100%; height: 100%;">
										<comEmptyData></comEmptyData>
									</view>
									<view class="detail-rate-data relative flex-align-items-center" v-for="(item, index) in resLists" :key="index">
										<image
											class="bg"
											v-if="commonConfigs && commonConfigs.domainFrontFileLink"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/rate-bg${item.is_give === 1 ? '-active' : ''}.png`"
											mode=""
										></image>
										<image
											class="detail-rate-tip relative"
											v-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type.toLowerCase() === 'hot'"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/hot-icon.png`"
											mode="heightFix"
										></image>
										<image
											class="detail-rate-tip relative"
											v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type.toLowerCase() === 'cool'"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/cool-icon.png`"
											mode="heightFix"
										></image>
										<image
											class="detail-rate-tip relative"
											v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '全局'"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/all-icon.png`"
											mode="heightFix"
										></image>
										<image
											class="detail-rate-tip relative"
											v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type.toLowerCase() === 'first'"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/first-icon.png`"
											mode="heightFix"
										></image>
										<image
											class="detail-rate-tip relative"
											v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type.toLowerCase() === 'last'"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/last-icon.png`"
											mode="heightFix"
										></image>
										<image
											class="detail-rate-tip relative"
											v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '夺宝'"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/treasure-icon.png`"
											mode="heightFix"
										></image>
										<image
											class="detail-rate-tip relative"
											v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '叠叠'"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/stacking-icon.png`"
											mode="heightFix"
										></image>
										<image
											class="detail-rate-tip relative"
											v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '冲冲'"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/flush-icon.png`"
											mode="heightFix"
										></image>
										<image
											class="detail-rate-tip relative"
											v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '普通'"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/ordinary-icon.png`"
											mode="heightFix"
										></image>
										<image class="detail-rate-type relative" 
											v-else 
											:src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/level-` + (item.reward_item_type && item.reward_item_type.toLowerCase()) + '.png'"
											mode="heightFix"></image>
										<view class="detail-rate-nums relative">{{ item.remain_stock_num }}/{{ item.each_box_stock_num }}</view>
										<view class="detail-rate-name truncate relative">{{ item.reward_item_name }}</view>
										<view class="detail-rate-txt relative flex">
											<template v-if="item.is_give === 1">
												<image
													class="rate-txt-give"
													v-if="commonConfigs && commonConfigs.domainFrontFileLink && item.is_give === 1"
													:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/gift.png`"
													mode=""
												></image>
											</template>
											<template v-else>
												<image
													class="rate-txt-nums"
													v-if="commonConfigs && commonConfigs.domainFrontFileLink"
													:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/rate.png`"
													mode=""
												></image>
												<text class="rate-txt-name">{{ item.reward_rate }}</text>
											</template>
										</view>
									</view>
								</scroll-view>
							</template>

							<template v-else-if="currentTabType === 3">
								<view class="detail-tab-info flex">
									<view
										class="detail-tab-data relative font-hanserif-regular"
										:class="[sortTabType === item.type ? 'active font-hanserif-bold' : '']"
										v-for="(item, index) in sortTabList"
										:key="index"
										@click="setTabSortFun(item)"
									>
										<text class="relative">{{ item.name }}</text>
										<image
											class="detail-tab-bg absolute"
											v-if="commonConfigs && commonConfigs.domainFrontFileLink"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/line-active.png`"
											mode=""
										></image>
									</view>
								</view>
								<view class="detail-sort-info relative margin-auto">
									<view v-if="!sortRecordList.length" style="width: 100%; height: 100%;">
										<comEmptyData></comEmptyData>
									</view>
									<view class="detail-sort-box relative flex" v-for="(item, index) in sortRecordList" :key="index">
										<image
											class="bg"
											v-if="commonConfigs && commonConfigs.domainFrontFileLink"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/rank-bg.png`"
											mode=""
										></image>
										<view class="detail-sort-cover flex-all-center relative">
											<image class="sort-cover-img" :src="item.avatar" mode=""></image>
											<image
												class="absolute"
												v-if="item.vip_cover"
												:src="item.vip_cover"
												mode="heightFix"
												:style="{
													'border-radius': 'unset',
													'width': 'auto',
													'top': '-18rpx',
													'left': '-20rpx',
													'right': 0,
													'height': '110rpx',
													'margin': 'auto',
													'z-index': 1,
												}"
											></image>
										</view>
										<view class="detail-sort-data relative">
											<view class="detail-sort-name flex-align-items-center">
												<view class="sort-name-icon flex-all-center relative text-nowrap" v-if="item.nums">
													<image
														class="bg"
														v-if="commonConfigs && commonConfigs.domainFrontFileLink"
														:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/rank-sort.png`"
														mode=""
													></image>
													<text class="relative">冲{{ item.nums }}发</text>
												</view>
												<view class="sort-name-txt truncate">{{ item.nickname }}</view>
											</view>
											<view class="detail-sort-sums flex">
												<view class="sort-sums-txt flex-all-center relative" v-for="(subItem, subIndex) in item.rewards" :key="subIndex">
													<image
														class="bg"
														v-if="commonConfigs && commonConfigs.domainFrontFileLink"
														:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/rank-item-bg.png`"
														mode=""
													></image>
													<text class="relative">{{ subItem }}</text>
												</view>
											</view>
										</view>
										<view class="detail-sort-title relative font-hanserif-bold">
											NO.<text class="sort-title-txt">{{ item.rank }}</text>
										</view>
									</view>
								</view>
							</template>

							<!-- 记录 : 2普通  6天梯竞技 8夺宝 -->
							<template v-else-if="currentTabType === 2 || currentTabType === 6 || currentTabType === 8">
								<view class="detail-tab-info flex" v-if="currentTabType === 6">
									<view class="detail-tab-data relative font-hanserif-regular"
										:class="[hotCoolTabType === item.type ? 'active font-hanserif-bold' : '']"
										v-for="(item, index) in hotCoolTabList"
										:key="index"
										@click="setTabHotCoolFun(item)"
									>
										<text class="relative">{{ item.name }}</text>
										<image
											class="detail-tab-bg absolute"
											v-if="commonConfigs && commonConfigs.domainFrontFileLink"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/line-active.png`"
											mode=""
										></image>
									</view>
								</view>
								<view class="detail-tab-info flex" v-if="currentTabType === 8">
									<view
										class="detail-tab-data relative font-hanserif-regular"
										:class="[hotCoolTabType === item.type ? 'active font-hanserif-bold' : '']"
										v-for="(item, index) in treasureTabList"
										:key="index"
										@click="setTabHotCoolFun(item)"
									>
										<text class="relative">{{ item.name }}</text>
										<image
											class="detail-tab-bg absolute"
											v-if="commonConfigs && commonConfigs.domainFrontFileLink"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/line-active.png`"
											mode=""
										></image>
									</view>
								</view>
								<scroll-view scroll-y @scrolltolower="scrolltolower" :style="{height: 'calc(100vh - ' + commonNavHeight + ' - 724rpx)'}" class="detail-HC-info margin-auto">
									<view v-if="!resLists.length" style="width: 100%; height: 100%;">
										<comEmptyData></comEmptyData>
									</view>
									<view class="detail-HC-data relative flex-align-items-center" v-for="(item, index) in resLists" :key="index">
										<image
											class="bg"
											v-if="commonConfigs && commonConfigs.domainFrontFileLink"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/record-list.png`" mode=""></image>
										<template v-if="item && !item.nickname">
											<image
												class="detail-disble-btn"
												v-if="commonConfigs && commonConfigs.domainFrontFileLink"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/no-buy.png`" mode=""></image>
										</template>
										<template v-else>
											<view class="detail-HC-img absolute flex-all-center" v-if="item.is_give === 0 && item.num_sort != 0" :style="{backgroundImage: `url(${commonConfigs.domainFrontFileLink}/files/images/infinite/record-sort.png)`}">
												<text class="relative detail-HC-img-txt">{{ item.num_sort }}</text>
											</view>
											<view class="detail-HC-cover flex-all-center relative">
												<image class="detail-HC-cover-img" :src="item.avatar" mode=""></image>
												<image
													class="absolute"
													v-if="item.vip_cover"
													:src="item.vip_cover"
													mode="heightFix"
													:style="{
														'border-radius': 'unset',
														'width': 'auto',
														'top': '-18rpx',
														'left': '-20rpx',
														'right': 0,
														'height': '110rpx',
														'margin': 'auto',
														'z-index': 1,
													}"
												></image>
											</view>
											<view class="detail-HC-title relative">
												<view class="detail-HC-name truncate">{{ item.nickname }}</view>
												<view class="detail-HC-dates truncate">{{ item.create_time }}</view>
											</view>
											<view class="detail-HC-type relative flex-direction-column flex-align-items-center">
												<image
													class="HC-type-tip"
													v-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type.toLowerCase() === 'hot'"
													:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/hot-icon.png`"
													mode="heightFix"
												></image>
												<image
													class="HC-type-tip"
													v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type.toLowerCase() === 'cool'"
													:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/cool-icon.png`"
													mode="heightFix"
												></image>
												<image
													class="HC-type-tip"
													v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '全局'"
													:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/all-icon.png`"
													mode="heightFix"
												></image>
												<image
													class="HC-type-tip"
													v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type.toLowerCase() === 'first'"
													:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/first-icon.png`"
													mode="heightFix"
												></image>
												<image
													class="HC-type-tip"
													v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type.toLowerCase() === 'last'"
													:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/last-icon.png`"
													mode="heightFix"
												></image>
												<image
													class="HC-type-tip"
													v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '夺宝'"
													:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/treasure-icon.png`"
													mode="heightFix"
												></image>
												<image
													class="HC-type-tip"
													v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '叠叠'"
													:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/stacking-icon.png`"
													mode="heightFix"
												></image>
												<image
													class="HC-type-tip"
													v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '冲冲'"
													:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/flush-icon.png`"
													mode="heightFix"
												></image>
												<image
													class="HC-type-tip"
													v-else-if="commonConfigs && commonConfigs.domainFrontFileLink && item.reward_item_type === '普通'"
													:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/ordinary-icon.png`"
													mode="heightFix"
												></image>
												<image class="HC-type-nums" 
													v-else 
													:src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/level-` + (item.reward_item_type && item.reward_item_type.toLowerCase()) + '.png'"
													mode="heightFix"></image>
												<image
													class="HC-type-give absolute"
													v-if="commonConfigs && commonConfigs.domainFrontFileLink && item.is_give === 1"
													:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/gift.png`"
													mode=""
												></image>
												<view class="HC-type-name truncate">{{ item.reward_item_name }}</view>
											</view>
										</template>
									</view>
								</scroll-view>
							</template>
						</view>
					</view>

					<view class="oper-btn-box fixed flex flex-align-items-center flex-justify-content-around" 
						v-if="rewardData && rewardData.reward_sheet_range">
						
						<view
							class="oper-btn-info flex relative"
							v-for="(item, index) in rewardData.reward_sheet_range"
							:key="index"
							@click="item.reward_price_status === 'can' ? setPreOrderFun(item.reward_price_number) : ''"
						>
							<view :class="['oper-btn-img', 'flex', 'flex-direction-column', 'flex-all-center', 'relative', setDisableFun(item.reward_price_status)]">
								<image
									class="bg"
									v-if="commonConfigs && commonConfigs.domainFrontFileLink"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/common/buy-btn.png`"
								/>
								
								<image
									class="bg absolute"
									style="z-index: 10;"
									v-if="commonConfigs && commonConfigs.domainFrontFileLink && rewardData.is_person_lockstatus"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/reward-submit-img.png`"
									mode=""
								></image>

								<view class="oper-btn-detail relative">
									<view class="relative oper-btn-txt font-hanserif-bold text-nowrap" style="z-index: 2">{{ item.reward_price_desc }}</view>
								</view>

								<view class="oper-btn-price relative font-hanserif-bold" v-if="poolTypeSence === 'integral'">
									<view class="relative oper-btn-price-txt" style="z-index: 2">{{ item.reward_price }}积分</view>
								</view>
								<view class="oper-btn-price relative font-hanserif-bold" v-else>
									<view class="relative oper-btn-price-txt" style="z-index: 2">￥{{ item.reward_price }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<comMask v-model="isShowRewardRes">
					<view class="award-result-uppop relative">
						<view class="award-result-box relative">
							<image
								v-if="commonConfigs && commonConfigs.domainFrontFileLink"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/common/reward-box-bg.png`"
								class="bg"
								mode=""
							></image>
							<scroll-view class="" :style="{ height: `calc(100% - 18rpx)` }" scroll-y enable-flex scroll-with-animation>
								<comRewardList :awardData="awardData" v-if="isShowRewardRes"></comRewardList>
							</scroll-view>
						</view>
						<view class="award-result-btns flex flex-justify-content-evenly relative">
							<view class="relative result-btn-img" @click="gooPageUrl('/secondary/bagPage/bagPage')">
								<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/popup/reward-bag-btn-cancel.png`"  class="bg" mode=""></image>
							</view>
							<view class="relative result-btn-img" @click="isShowRewardRes = false">
								<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/popup/reward-btn-back.png`" class="bg" mode=""></image>
							</view>
						</view>
					</view>
				</comMask>
				
				<comRewardOrder 
					ref="comRewardOrder"
					v-model="isShowOrderUppop" 
					:poolTypeSence="poolTypeSence" 
					:rewardData="rewardData" 
					@setPayOrderFun="setPayOrderFun" 
					@setNextOrderFun="setNextOrderFun"
					@setSelectCouponFun="setSelectCouponFun" 
					@setCurrentPaysFun="setCurrentPaysFun"
					@setAgreeFun="$store.commit('SHOW_AGREEMENT_SET_FUN', true)"></comRewardOrder>
					
				<comRuleUppop v-model="isShowRuleUppop" 
					ruleName="全局赏说明"
					:type="type" :isShowPoolRuleTxt="true" :isShowCheckRuleFlag="isShowCheckRuleFlag" :ruleTypeValue="ruleTypeValue" :isNeedReadedClose="false" :isAllowedClickMaskClose="false">
					<template>
						<view v-html="ruleImgTxt"></view>
					</template>
				</comRuleUppop>
				
				<!-- 宝箱弹框 -->
				<view class="mask-view" v-if="boxMask" :zoom="true" @click.stop="closeBoxMask">
					<view class="box-content absolute font-hanserif-bold" @click.stop="boxMask = true">
						<image class="bg" 
							:src="`${commonConfigs.domainFrontFileLink}/files/images/abounty/reward-box-bg.png`"
							mode=""></image>
						<view class="box-content-list absolute flex">
							<view class="bag-goods-list flex-justify-content-between flex-wrap" v-if="previewBoxRewardData && previewBoxRewardData.length">
								<view class="content-pool-detail relative" v-for="(subItem, subIndex) in previewBoxRewardData" :key="subIndex" @click="gooShopDetailFun(subItem, subIndex, 'boxReward')">
									<view class="bag-goods-type absolute" v-if="subItem.reward_item_type">
										<image class="bag-goods-type-img relative"
											:src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/level-` + subItem.reward_item_type.toLowerCase() + '.png'"
											mode="heightFix"></image>
									</view>
									<view class="content-pool-cover relative flex-all-center">
										<image class="bg absolute" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/small-border-${subItem.reward_item_type && subItem.reward_item_type.toLowerCase()}.png`" mode=""></image>
										<comPlaceImage
											class="pool-cover-img"
											placeImageClass="flex-all-center"
											:lazyLoad="true"
											:src="subItem.reward_item_cover"
											mode="heightFix"></comPlaceImage>
									</view>
									<view class="content-pool-txt" v-if="showNoticeTxtFun(subItem.reward_item_name, 8)" style="margin-top: 10rpx;">
										<uni-notice-bar
											class="uni-notice-bar"
											color="#23220C"
											background-color="transparent"
											:scrollable="true"
											:single="true"
											:text="showNoticeTxtFun(subItem.reward_item_name, 8)"
											:speed="54"
										></uni-notice-bar>
									</view>
									<view class="content-pool-txt truncate" v-else>{{ subItem.reward_item_name }}</view>
									<view class="content-item-rate text-nowrap">
										概率：
										<text class="rate">{{ subItem.reward_rate }}</text>
									</view>
								</view>
								<view class="content-pool-detail relative"></view>
							</view>
							
							<view v-else-if="previewBoxRewardData && !previewBoxRewardData.length && !previewLoading" style="z-index: 0">
								<comEmptyData></comEmptyData>
							</view>
							
							<comLoading style="width: 100%;height: 100%;" v-if="previewLoading"></comLoading>
						</view>
						
						<image class="box-close-box absolute"
							:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/exchange-close-icon.png`"
							mode=""
							@click.stop="closeBoxMask"></image>
					</view>
				</view>
				
			</view>
		</template>
	</comRoot>
</template>

<script>
	import { payment } from '@/setupproject/PAYS_FUN';
	import { ACTIONS } from '@/store/modules/userStore';
	import store from '@/store';
	import audio from '@/setupproject/AVIDEO_FUN.js';
	import paging from '@/inmixed/paging.mixin.js';
	import otherpay from '@/inmixed/otherpay.mixin.js'
	import { boxIndexSetFun, wxAuthSetFun, addPhoneSetFun, setAsyncFunWait, secondToDate, setParseFunTime } from '@/setupproject/TOOLS_FUN';
	import { 
		geRewardPoolInfoApi, 
		geRewardPoolItemApi, 
		getRewardPoolRecordApi, 
		getRewardPoolRankApi, 
		getRewardPoolRateApi, 
		getRewardBoxListApi,
		getRewardViewAgreementApi, 
		geRewardOrderPreApi, 
		geRewardOrderApi, 
		geRewardsApi,
		getRewardOrderPointPreApi,
		getRewardOrderPointApi,
		getContentHomeApi,
	 } from '@/setupproject/INTERFACE';

	export default {
		name: "globalRewardPage",
		mixins: [otherpay, paging],
		data() {
			return {
				commonNavTitle: '全局赏',
	
				// 监听返回当前平台时触发支付结果事件
				payBeInfos: {
					isPayBackSence: false,
					isReward: true, // 是否是抽赏：全局赏、飞机赏、
					type: null,
					balance_order_num: null
				},
				apiPayTypeVal: 2,
				currentPayType: 'wxpay',
				
				isShowCheckRuleFlag: true,
				ruleTypeValue: 0,
				currentTabType: 0,
				currentIdCoupon: '',
				poolTypeSence: '',
				hotCoolTabType: 1,
				hotCoolTabList: [
					{ name: '预览记录', type: 1 },
					{ name: 'Hot记录', type: 2 },
					{ name: 'Cool记录', type: 3 }
				],
				hotCoolRecordList: [],
				type: 'all', //all 全局赏、HC 天梯竞技、treasure 夺宝赏、aplus 一番赏
				tabAreaList: [
					{ name: '预览', type: 0 },
					{ name: '概率', type: 1 },
					{ name: '记录', type: 2 },
					{ name: '排行', type: 3 }
				],
				sortTabType: 1,
				sortRecordList: [],
				sortTabList: [
					{ name: '次数排行', type: 1 },
					{ name: '欧皇排行', type: 2 }
				],
				treasureTabList: [
					{ name: '预览记录', type: 1 },
					{ name: '夺宝池记录', type: 4 },
				],
				awardData: [],
				rewardPoolId: '',
				rewardPoolInfo: {
					reward_item: [],
				},
				rewardData: {},
				isShowRewardRes: false,
				ruleImgTxt: '',
				isShowRuleUppop: false,
				rewardBtnNum: 1,
				isShowOrderUppop: false,
				submitLoading: false,
				
				isReloadFuning: false,
				
				boxMask: false, //宝箱弹框
				previewLoading: true,
				timer: null, // 定时器
				countdownObj: {},
				previewBoxRewardData: [],
			};
		},
		computed: {
			boxSubIndex() {
				return this.$store.getters.boxSubIndex || 1;
			},
			commonNavHeight() {
				return this.$store.getters.commonNavHeight + 'px';
			},
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
			commonOnline() {
				return this.$store.getters.commonOnline;
			},
		},
		watch: {
			boxSubIndex: {
				async handler(v, ov) {
					if(!this.rewardPoolId || this.isReloadFuning) return;
					
					await this.setReloadFun('loading');
				},
				// immediate: true,
			},
			isShowOrderUppop(v) {
				if (!v) {
					this.submitLoading = false;
				}
			},
			
		},
		async onLoad(options) {
			this.rewardPoolId = options.id;
			
			if (options.poolTypeSence) {
				this.poolTypeSence = options.poolTypeSence
			}
			
			if (options.type) {
				this.type = options.type;
			}
			if (this.type === 'pk') {
				this.commonNavTitle = '天梯竞技';
				this.tabAreaList = [
					{ name: '预览', type: 0 },
					{ name: 'Hot', type: 4 },
					{ name: 'Cool', type: 5 },
					{ name: '记录', type: 6 }
				];
			} else if (this.type === 'treasure') {
				this.commonNavTitle = '夺宝赏';
				this.tabAreaList = [
					{ name: '预览', type: 0 },
					{ name: '夺宝赏', type: 7 },
					{ name: '记录', type: 8 }
				];
			} else if (this.type === 'lockbox') {
				this.commonNavTitle = '开箱';
			} else if (this.type === 'aplus') {
				this.commonNavTitle = '一番赏';
			}

			await store.dispatch(ACTIONS.USER_INFO_GET_FUN);
			
			await boxIndexSetFun(options.boxSubIndex);
			
			// await this.getRewardPoolDetailFun();
			
			await this.isShowPoolAgreeFun();
		},
		onUnload() {
			// 清除倒计时定时器
			clearInterval(this.timer);
		},
		
		onShow() {
			// #ifdef APP-PLUS
			if(this.$store.getters.detailRechargeFlag) {
				uni.$emit('update', 'comRewardOrder');
				
				// 详情页充值标志位
				this.$store.commit('SET_DETAIL_RECHARGE_FLAG', false);
				return;
			}
			// #endif
			
			// 监听返回当前平台时触发支付结果事件
			if(this.payBeInfos.isPayBackSence && ['adapay_mini', 'alipay', 'yeepay_wx', 'adapay_alipay', 'mbpay_jump_mini'].includes(this.currentPayType)){
				this.payBeInfos.isPayBackSence = !this.payBeInfos.isPayBackSence;
				this.$store.commit('SET_WATCH_PLAT_PARAMS', {
					'type': this.payBeInfos.type,
					'balance_order_num': this.payBeInfos.balance_order_num,
					'msg': '已购买成功，请去赏袋查看',
					'isReward': true
				});
			}
		},
		
		onShareAppMessage(e) {
			if (e.from === 'menu') {
				let title = `邀请你来开奖「${this.commonNavTitle}·${this.rewardData.reward_pool_name}」还剩 ${this.rewardData.total_remain_stock_num}人`;
				this.$store.commit('SHARE_INFO_SET_FUN', {
					title,
					// title: this.rewardData.reward_pool_name,
					path: `/secondary/globalRewardPage/globalRewardPage?id=${this.rewardPoolId}&boxSubIndex=${this.boxSubIndex}&type=${this.type}`,
					imageUrl: this.rewardData.reward_pool_detail_image,
					content: '',
					desc: ''
				});
			}
			uni.showLoading({
				title: '',
				mask: false
			});
			const promise = new Promise((resolve) => {
				setTimeout(() => {
					const {
						shareObjData
					} = this.$store.getters;
					resolve(shareObjData)
					uni.hideLoading();
				}, 200);
			});
		
			return {
				promise
			};
		},
		methods: {
			async openBoxMask(id, item) {
				console.log("openBoxMask:")
				
				// 不弹框，跳转宝箱详情页
				return uni.navigateTo({
					url: `/secondary/boxDetailPage/boxDetailPage?id=${id}`
				});
				
				this.previewLoading = true;
				this.boxMask = true;
				
				const {
					data,
					code,
					msg
				} = await getRewardBoxListApi({
					id, // id	是	int	宝箱ID
				});
			
				if (code !== 200) {
					this.previewLoading = false;
					return uni.showToast({
						icon: 'none',
						title: msg
					});
				}
				
				this.previewBoxRewardData = data.reward_item;
			
				this.previewLoading = false;
			},
			closeBoxMask() {
				this.boxMask = false;
			},
			
			numCalculation(nums, sums) {
				let res = 0;
				if (sums == 0) {
					res = 1;
				} else {
					res = nums / sums > 1 ? 1 : nums / sums;
				}
				return res;
			},
			
			share() {
				let title = `邀请你来开奖「${this.commonNavTitle}·${this.rewardData.reward_pool_name}」还剩 ${this.rewardData.total_remain_stock_num}人`;
				this.$store.commit('SHARE_INFO_SET_FUN', {
					title,
					// title: this.rewardData.reward_pool_name,
					path: `/secondary/globalRewardPage/globalRewardPage?id=${this.rewardPoolId}&boxSubIndex=${this.boxSubIndex}&type=${this.type}`,
					imageUrl: this.rewardData.reward_pool_detail_image,
					content: '',
					desc: ''
				});
			},
			
			async setPreOrderFun(num) {
				// 如果当前是开箱-锁箱模式，且是锁定状态，不执行抽赏
				if(this.rewardData.is_open_intercept && this.rewardData.is_person_lockstatus) {
					return;
				}
				
				if (this.submitLoading) return;
			
				// #ifdef MP-WEIXIN
				// 支付前验证是否已登录
				if (!wxAuthSetFun()) return;
				// #endif
			
				// #ifdef APP-PLUS
				// 支付前验证是否已登录
				if (await store.dispatch('SHOW_LOGIN_APP_GET_FUN')) return;
				// 支付前验证是否已绑定手机
				if (addPhoneSetFun()) return;
				// #endif
				
				// 限额提醒
				this.getPayNotice();
			
				this.currentIdCoupon = '';
				this.rewardBtnNum = num;
				this.$set(this.rewardData, 'cover', this.rewardData.reward_pool_detail_image);
				this.$set(this.rewardData, 'reward_num', this.rewardBtnNum);
				this.$set(this.rewardData, 'num', this.rewardBtnNum);
				this.$set(this.rewardData, 'name', this.rewardData.reward_pool_name);
				
				this.setNextOrderFun();
			},
			
			setSelectCouponFun(value) {
				this.currentIdCoupon = value;
				this.setNextOrderFun();
			},
			
			orderInfoDats() {
				return {
					use_currency_num: store.getters.commonPaySortList.includes(1) ? 1 : 0,
					use_balance: store.getters.commonPaySortList.includes(2) ? 1 : 0,
					reward_pool_id: this.rewardPoolId,
					reward_cur_box_num: this.boxSubIndex,
					pay_channel: this.currentPayType,
					reward_num: this.rewardBtnNum,
					num_sort: this.appointFlag ? this.idList : null,
					coupon_id: store.getters.commonPaySortList.includes(3) ? this.currentIdCoupon : '',
				};
			},
			
			setCurrentPaysFun(value) {
				this.currentPayType = value;
			},
			
			gooShopDetailFun(item, index, type) {
				if(type === 'reward' && item.reward_item_box_type === 2) {
					return this.openBoxMask(item.reward_item_id, item);
				}
				
				// 宝箱物品详情
				if(type === 'boxReward') {
					this.$store.commit('INFINITE_DETAILS_SET_FUN', item);
					
					return uni.navigateTo({
						url: `/secondary/goodDetailPage/goodDetailPage?type=boxReward`
					});
				}
				
				item.reward_price_1 =  this.rewardData.reward_price_1;
				this.$store.commit('GLOBAL_DETAILS_SET_FUN', item);
				
				uni.navigateTo({
					url: `/secondary/goodDetailPage/goodDetailPage?type=${this.type}`
				});
			},
			
			gooPageUrl(url) {
				uni.navigateTo({
					url
				});
			},
			
			showNoticeTxtFun(name, len) {
				if (name) {
					var namelen = name.length, sum = 0; 
					for (var i = 0; i < namelen; i++) {
						// 中文: 字符编码大于255
						if (name.charCodeAt(i) > 255) {  
							sum += 2;  // 双字节, 累加2
						} else {
							sum++;  // 单字节, 累加1
						}
					}
					if (sum > len*2) {
						return name;
					}
				}
			},
			
			async setShowRuleFun() {
				let type = '';
				if (this.type === 'pk') {
					type = 59;
				} else if (this.type === 'treasure') {
					type = 60;
				} else if (this.type === 'aplus') {
					type = this.commonOnline ? 51 : 61;
				} else if (this.type === 'lockbox') {
					type = this.commonOnline ? 84 : 84;
				} else {
					type = 58;
				}
				
				const { data } = await getContentHomeApi({ type });
				this.ruleImgTxt = data.content;
				this.isShowRuleUppop = true;
			},
			
			async isShowPoolAgreeFun () {
				let type = null;
				if (this.type === 'pk') {
					type = 59;
				} else if (this.type === 'treasure') {
					type = 60;
				} else if (this.type === 'aplus') {
					type = this.commonOnline ? 51 : 61;
				} else if (this.type === 'lockbox') {
					type = this.commonOnline ? 51 : 61;
				} else {
					type = 58;
				}
				
				this.ruleTypeValue = type;
				
				getRewardViewAgreementApi({
					id: type
				}).then(res => {
					if(res.code === 200) {
						if(res.data.reward_agreement) {
							this.isShowCheckRuleFlag = false;
						}
						if(!res.data.reward_agreement) {
							this.setShowRuleFun();
						}
					}
				})
			},
			
			async setReloadFun(e) {
				this.isReloadFuning = true;
				
				if (e === 'loading') {
					store.commit('SHOW_LOADING_SET_FUN', true);
					await this.getRewardPoolDetailFun();
					await this.setTabAreaFun();
					store.commit('SHOW_LOADING_SET_FUN', false);
				} else if (e === 'token') {
					let curPage = getCurrentPages();
					let route = curPage[curPage.length - 1].route; //获取当前页面的路由
					let params = curPage[curPage.length - 1].options; //获取当前页面参数，如果有则返回参数的对象，没有参数返回空对象{}
					await boxIndexSetFun(params.boxSubIndex || 1);
					
					await this.getRewardPoolDetailFun();
					await this.setTabAreaFun();
				} else {
					await this.getRewardPoolDetailFun();
					await this.setTabAreaFun();
				}
				
				this.isReloadFuning = false;
			},
			
			setTabSortFun(item) {
				this.sortTabType = item.type;
				this.sortRecordList = [];
				this.getRewardPoolSortFun();
			},
			
			async setTabAreaFun(item) {
				this.rewardPoolInfo.reward_item = [];
				
				if(item) {
					this.currentTabType = item.type;
					await this.getRewardPoolDetailFun();
				}
				
				if(this.currentTabType === 0) { //预览
					this.getRewardPoolInfoFun(1);
				}else if(this.currentTabType === 4) { // Hot4 
					this.getRewardPoolInfoFun(2);
				}else if(this.currentTabType === 5) { // Cool5
					this.getRewardPoolInfoFun(3);
				}else if(this.currentTabType === 7) { // 夺宝7
					this.getRewardPoolInfoFun(4);
				}else if([1, 2, 6, 8].includes(this.currentTabType)) { // 1 概率 2 记录 6 pk记录 8夺宝记录
					this.pagingInitFun();
					this.resListsGetFun();
				}else if(this.currentTabType === 3) { // 排行3
					this.getRewardPoolSortFun();
				}
			},
			
			async getRewardResFun(order_num) {
				const { data, msg, code } = await geRewardsApi({
					order_num
				});
			
				if (code !== 200) {
					this.submitLoading = false;
					return uni.showToast({
						icon: 'none',
						title: msg,
						duration: 2000
					});
				}
			
				this.awardData = [];
				this.isShowOrderUppop = false;
				
				if(!uni.getStorageSync('isRewardAudioSwitch')) {
					audio.setPlayAVideo(`${this.commonConfigs.domainFrontFileLink}/files/avideo/open-box-audio.mp3`); // 中奖声音
				}
			
				for (let item of data.sort_detail) {
					this.awardData.push(item);
				}
			
				this.isShowRewardRes = true;
				await this.setReloadFun();
				await setAsyncFunWait(800);
				
				uni.showToast({
					icon: 'none',
					title: msg,
					mask: true,
					duration: 500,
				});
			
				this.submitLoading = false;
			},
			
			async getRewardPoolInfoFun(type = 1) {
				const { data, code } = await geRewardPoolItemApi({
					remain_status_type: type,
					reward_pool_id: this.rewardPoolId,
					reward_cur_box_num: this.boxSubIndex,
				});
				
				if (code !== 200) return false;
				
				this.rewardPoolInfo = data;
			},
			
			setTabHotCoolFun(item) {
				this.hotCoolTabType = item.type;
				this.hotCoolRecordList = [];
				this.pagingInitFun();
				this.resListsGetFun();
			},
			
			async getRewardPoolSortFun() {
				const { data, code } = await getRewardPoolRankApi({
					rank_type: this.sortTabType,
					reward_pool_id: this.rewardPoolId,
					reward_cur_box_num: this.boxSubIndex,
				});
				
				if (code !== 200) return false;
				
				this.sortRecordList = data;
			},
			
			/* 需要固定为listsGetFun；以配合 paging.mixin */
			async listsGetFun(e) {
				this.loading = true;
				let tempData, tempCode, resLists;
				
				if (this.currentTabType === 1) {
					const {
						data,
						code
					} = await getRewardPoolRateApi({
						...this.pageInfoObj,
						reward_cur_box_num: this.boxSubIndex,
						reward_pool_id: this.rewardPoolId,
					});
					
					tempData = data;
					tempCode = code;
					resLists = tempData;
				} else if (this.currentTabType === 2 || this.currentTabType === 6 || this.currentTabType === 8) {
					const {
						data,
						code
					} = await getRewardPoolRecordApi({
						...this.pageInfoObj,
						type: this.hotCoolTabType,
						reward_pool_id: this.rewardPoolId,
						reward_cur_box_num: this.boxSubIndex,
					});
					tempData = data;
					tempCode = code;
					resLists = tempData.record;
				}
			
				this.loading = false;
				
				if (tempCode !== 200) return false;
			
				/* 返回 到 paging.mixin 处理 */
				return {
					resLists,
					count: tempData.count
				};
			},
			
			setChangeBoxFun(type) {
				if (this.rewardData) {
					if (type === 'prev') {
						return this.boxSubIndex <= 1 ? false : true;
					}
					if (type === 'next') {
						return this.boxSubIndex >= this.rewardData.total_box_num ? false : true;
					}
				}
				return true;
			},
			
			async setNextOrderFun() {
				if(this.poolTypeSence === 'integral') {
					const { data, code } = await getRewardOrderPointPreApi(this.orderInfoDats());
					
					if (code !== 200) return false;
					
					if (!data) return;
					
					this.$set(this.rewardData, 'currency_num', data.currency_num);
					this.$set(this.rewardData, 'is_view_pay_agreement', data.is_view_pay_agreement);
					this.$set(this.rewardData, 'deduct_balance_rmb', data.deduct_balance_rmb || 0);
					this.$set(this.rewardData, 'deduct_currency_num_rmb', data.deduct_currency_num_rmb || 0);
					this.$set(this.rewardData, 'allPrice', data.reward_price_final);
					this.$set(this.rewardData, 'price', data.reward_price);
					this.$set(this.rewardData, 'beforePrice', data.reward_price_before_coupon);
					this.$set(this.rewardData, 'couponResult', data.coupon_resutl);
					this.$set(this.rewardData, 'points', data.points);
				}else{
					const { data, code } = await geRewardOrderPreApi(this.orderInfoDats());
					
					if (code !== 200) return false;
				
					if (!data) return;
					
					this.$set(this.rewardData, 'currency_num', data.currency_num);
					this.$set(this.rewardData, 'is_view_pay_agreement', data.is_view_pay_agreement);
					this.$set(this.rewardData, 'deduct_balance_rmb', data.deduct_balance_rmb || 0);
					this.$set(this.rewardData, 'deduct_currency_num_rmb', data.deduct_currency_num_rmb || 0);
					this.$set(this.rewardData, 'allPrice', data.reward_price_final);
					this.$set(this.rewardData, 'price', data.reward_price);
					this.$set(this.rewardData, 'beforePrice', data.reward_price_before_coupon);
					this.$set(this.rewardData, 'couponResult', data.coupon_resutl);
					this.$set(this.rewardData, 'balance', data.balance);
				}
				
				this.isShowOrderUppop = true;
			},
			
			setDisableFun(status) {
				let disabled = false;

				if (this.totalRemainStockNum === 0) {
					disabled = true;
				} else if (status !== 'can') {
					disabled = true;
				}
				
				return disabled ? 'disabled' : '';
			},
			
			async setReplaceBoxFun(boxes) {
				if (boxes === 'prev') {
					if (this.setChangeBoxFun(boxes)) {
						boxIndexSetFun(Number(this.boxSubIndex) - 1);
					} else {
						uni.showToast({
							icon: 'error',
							title: '已是第一箱!'
						});
					}
					return;
				}
			
				if (boxes === 'next') {
					if (this.setChangeBoxFun(boxes)) {
						// 换箱 - 限定模式
						if(this.rewardData.is_lock_box && this.rewardData.total_remain_stock_num) {
							uni.showToast({
								icon: 'error',
								title: '售空才可下一箱哦~~'
							});
						}else{
							boxIndexSetFun(Number(this.boxSubIndex) + 1);
						}
					} else {
						uni.showToast({
							icon: 'error',
							title: '已是最后一箱!'
						});
					}
					return;
				}
				
				let params = '';
				// 换箱 - 限定模式
				if(this.rewardData.is_lock_box) {
					let hasStockIndex = (this.rewardData.has_stock_box_list && this.rewardData.has_stock_box_list[0]) || 1;
					params = `id=${this.rewardPoolId}&num=${this.rewardData.total_box_num}&isLimit=${this.rewardData.is_lock_box || ''}&hasStockIndex=${hasStockIndex}`
				}else{
					params = `id=${this.rewardPoolId}&num=${this.rewardData.total_box_num}`
				}
				
				this.gooPageUrl(`/secondary/replaceBoxPage/replaceBoxPage?${params}`);
			},
			
			async getRewardPoolDetailFun(e) {
				// 清除倒计时定时器
				clearInterval(this.timer);
				this.countdownObj = {};
				
				const { data, code } = await geRewardPoolInfoApi({
					reward_cur_box_num: this.boxSubIndex,
					reward_pool_id: this.rewardPoolId,
				});
				
				if (code !== 200) return false;
				
				this.rewardData = data;
				this.$forceUpdate();
				
				// let endTimeStr = Date.parse(new Date('2024-07-24 15:36:00').toString()) / 1000;
				// let currentTimeStr = Date.parse(new Date().toString()) / 1000;
				// let timeStr = endTimeStr - currentTimeStr;
				let timeStr = data.lock_counttime;
				
				if(timeStr > 0) {
					this.countdownObj = secondToDate(timeStr);
					
					this.timer = setInterval(() => {
						timeStr--;
						this.countdownObj = secondToDate(timeStr);
						if(!this.countdownObj.flag) {
							// 清除倒计时定时器
							clearInterval(this.timer);
							this.setReloadFun();
						};
					}, 1000);
				}
			},
			
			async setPayOrderFun() {
				if (this.submitLoading) return;
				this.submitLoading = true;
				
				if(this.poolTypeSence === 'integral') {
					const { data: productInfos, code, msg } = await getRewardOrderPointApi(this.orderInfoDats());
					this.currentIdCoupon = '';
					if (code !== 200) {
						this.submitLoading = false;
						return uni.showToast({
							icon: 'none',
							title: msg
						});
					}
					
					try {
						if (!productInfos.is_need_wx_pay) {
							await this.getRewardResFun(productInfos.order_num)
							return (this.submitLoading = false);
						}
						await payment(productInfos, this.currentPayType || 'wxpay', this.apiPayTypeVal);
						await this.getRewardResFun(productInfos.order_num);
					} catch (e) {
						this.submitLoading = false;
						console.error(e);
					}
					this.submitLoading = false;
					return;
				}
			
				const { data: productInfos, code, msg } = await geRewardOrderApi(this.orderInfoDats());
				this.currentIdCoupon = '';
				
				if (code !== 200) {
					this.submitLoading = false;
					
					// 如果当前是开箱-锁箱模式，刷新页面
					if(this.rewardData.is_open_intercept) {
						this.setReloadFun();
						this.isShowOrderUppop = false;
					}
					
					return uni.showToast({
						icon: 'none',
						title: msg
					});
				}
			
				// 原生支付： 微信、小程序、支付宝
				if (['wxapp', 'wxpay', 'alipay_method', 'mbpay_wxmini'].indexOf(this.currentPayType) !== -1) {
					try {
						if (!productInfos.is_need_wx_pay) {
							await this.getRewardResFun(productInfos.order_num);
							return (this.submitLoading = false);
						}
			
						await payment(productInfos, this.currentPayType || 'wxpay', this.apiPayTypeVal);
						await this.getRewardResFun(productInfos.order_num);
					} catch (e) {
						this.submitLoading = false;
						console.error(e);
					}
					this.submitLoading = false;
					return;
				}
				
				// 第三方小程序微信
				if (['adapay_mini', 'yeepay_wx', 'adapay_alipay', 'lianlianpay', 'mbpay_jump_mini'].includes(this.currentPayType)) {
					try {
						if (!productInfos.is_need_wx_pay) {
							await this.getRewardResFun(productInfos.order_num, msg)
							return this.submitLoading = false;
						}
						productInfos.balance_order_num = productInfos.order_num
						return this.launchMPToPayFun(productInfos, this.currentPayType);
					} catch (e) {
						this.submitLoading = false;
						console.error(e);
					}
					return;
				}
			
			},
			
		}
	};
</script>

<style lang="scss" scoped>
	.reward-page {
		.reward-info-content {
			padding-bottom: 310rpx;
			overflow-x: hidden;
			overflow-y: auto;
			
			.right-side-page {
				.tab-boxes-icon {
					top: 260rpx;
					right: 0;
					z-index: 1000;
					
					.oper-btn-icon {
						width: 124rpx;
						height: 53rpx;
						margin-bottom: 20rpx;
					}
				}
				
				.goto-pages-icon {
					top: 680rpx;
					right: 20rpx;
					z-index: 1000;
					
					.oper-btn-icon {
						margin-bottom: 20rpx;
						width: 80rpx;
						height: 93rpx;
					}
				}
			}
			
			.reward-pk-box {
				width: 686rpx;
				height: 136rpx;
				overflow: hidden;
				margin: 8rpx auto;
				.reward-pk-img {
					width: 686rpx;
					height: 136rpx;
					margin-left: 32rpx;
				}
				
				.reward-pk-one {
					overflow-x: auto;
					direction: rtl;
					left: 88rpx;
					top: 44rpx;
					width: 240rpx;
					height: 66rpx;
				}
				
				.reward-pk-two {
					overflow-x: auto;
					right: 88rpx;
					top: 44rpx;
					width: 240rpx;
					height: 66rpx;
				}
				
				.reward-pk-info {
					width: 66rpx;
					height: 66rpx;
					flex-shrink: 0;
					// margin-right: 4rpx;
					
					.pk-info-img {
						border-radius: 100%;
						width: 45rpx;
						height: 45rpx;
					}
				}
			}

			.reward-all-box {
				width: 710rpx;
				height: 362rpx;
				
				.reward-all-cover {
					width: 240rpx;
					height: 240rpx;
					top: 18rpx;
					left: 16rpx;
					
					.reward-all-img {
						max-width: 240rpx;
						height: 240rpx;
						border-radius: 16rpx;
					}
				}
				
				.reward-all-sums {
					font-size: 24rpx;
					color: #FFFFFF;
					top: 276rpx;
					left: 0rpx;
					width: 276rpx;
					height: 50rpx;
					text-align: center;
					.all-sums-txt {
						height: 100%;
						
						.all-sums-icon {
							width: 12rpx;
							height: 13rpx;
						}
						.all-sums-desc {
							margin: 0 12rpx;
						}
					}
				}
				
				.reward-all-detail {
					left: 270rpx;
					width: 360rpx;
					color: #FFFFFF;
					top: 26rpx;
					
					.reward-all-info {
						font-size: 36rpx;
					}
					
					.reward-all-price {
						width: 338rpx;
						height: 46rpx;
						margin-top: 10rpx;
						margin-left: -64rpx;
						padding-left: 64rpx;
						
						.all-price-icon {
							width: 48rpx;
							height: 48rpx;
							margin-right: 14rpx;
						}

						.all-price-txt {
							font-size: 28rpx;
							color: #63FFF7;
							.all-price-unit {
								font-size: 28rpx;
							}
						}
					}
					
					.reward-all-process {
						width: 290rpx;
						height: 13rpx;
						// border: 1rpx solid #000;
						background: #FFFFFF;
						border-radius: 10rpx;
						margin-top: 14rpx;
						
						.all-process-box {
							width: 290rpx;
							height: 13rpx;
							border-radius: 10rpx;
							background: #79F6FF;
						}
					}
					
					.reward-all-total {
						height: 26rpx;
						line-height: 26rpx;
						font-size: 22rpx;
						margin-top: 16rpx;
						color: #FFFFFF;
					}
					
					.reward-all-boxes {
						margin-top: 16rpx;
						
						.all-boxes-oper {
							flex-direction: column;
							width: 122rpx;
							font-size: 22rpx;
							color: #FFFFFF;
							
							&.active {
								color: #CCC;
								filter: grayscale(90%);
								-webkit-filter: grayscale(90%);
								-moz-filter: grayscale(90%);
								-ms-filter: grayscale(90%);
								-o-filter: grayscale(90%);
							}

							.boxes-oper-btn {
								height: 70rpx;
								.boxes-tab-btn {
									width: 38rpx;
									height: 40rpx;
								}

								.boxes-replace-btn {
									width: 70rpx;
									height: 70rpx;
								}
							}

							.boxes-oper-txt {
								margin-top: 4rpx;
								text-align: center;
							}
						}
					}
				}
			}

			.lock-tips-content {
				margin: auto;
				margin-top: 14rpx;
				width: 710rpx;
				height: 228rpx;
				padding: 0 50rpx;
				overflow: hidden;
				
				.lock-tip-txt {
					font-size: 22rpx;
					color: #768EBE;
					margin: 72rpx auto 30rpx;
					
					& > text {
						color: red;
						margin: 0 6rpx;
						font-size: 28rpx;
					}
				}
				
				.lock-tip-btn {
					font-size: 28rpx;
					color: #FFFEFE;
					width: 100%;
					left: 0;
					padding: 0 50rpx;
					bottom: 16rpx;
					
					.lock-btn-left {
						
					}
					.lock-btn-right {
						
					}
					.lock-btn-label {
						
					}
					.lock-btn-num {
						color: #FF8B1D;
					}
				}
				
				.lock-downtime-box {
					.lock-downtime-txt {
						width: 168rpx;
						height: 44rpx;
						font-size: 28rpx;
						color: #FFFEFE;
						
						.time-box {
							color: red;
						}
					}
				}
				
			}
			
			.reward-detail {
				margin-top: 14rpx;
				
				.detail-tip-box {
					padding-left: 18rpx;
					color: #FFFFFF;
					font-size: 20rpx;
					font-weight: 100;
					
					.tip-box-txt {
						width: 22rpx;
						height: 22rpx;
						margin-right: 10rpx;
					}
				}
				
				.detail-tab-btns {
					padding: 8rpx 0rpx 8rpx 20rpx;
					overflow-x: auto;
					margin-top: 12rpx;
					margin-bottom: 20rpx;
					
					.detail-tab-btn-txt {
						width: 176rpx;
						height: 64rpx;
						margin-right: 24rpx;
						font-size: 28rpx;
						color: #FFF;
						padding-left: 54rpx;
						
						&.active {
							color: #FFFFFF;
						}
					}
				}
				
				.detail-pool {
					.detail-pool-info {
						flex-wrap: wrap;
						margin-top: 22rpx;
						padding: 0 18rpx;
						
						.detail-pool-content {
							width: 178rpx;
							margin-bottom: 12rpx;
							
							&:nth-of-type(4n) {
								margin-right: 0rpx;
							}
							
							.detail-pool-cover {
								width: 162rpx;
								height: 162rpx;
								
								.detail-pool-img {
									width: 148rpx;
									height: 148rpx;
									border-radius: 16rpx;
									overflow: hidden;
								}
								
								.detail-pool-tip {
									width: 149rpx;
									height: 39rpx;
									left: 0rpx;
									top: 0rpx;
									z-index: 56;
								}
								
								.detail-pool-type {
									z-index: 100;
									max-width: 54rpx;
									height: 36rpx;
									left: -4rpx;
									top: 10rpx;
								}
							}
							
							.detail-pool-title {
								font-size: 24rpx;
								color: #FFFFFF;
								width: 100%;
								height: 26rpx;
								line-height: 26rpx;
								text-align: center;
								margin-top: 6rpx;
								z-index: 57;
								&.detail-pool-rate {
									color: #FFFFFF;
									font-size: 20rpx;
									font-weight: 100;
								}
								
								&.detail-pool-nums {
									text-align: center;
									position: absolute;
									width: unset;
									min-width: 57rpx;
									padding: 0 6rpx;
									height: 30rpx;
									background: rgba(0, 0, 0, 1);
									bottom: 68rpx;
									right: 20rpx;
									border-radius: 0rpx 0rpx 6rpx 0rpx;
									color: #ffffff;
								}
							}
						}
					}

					.detail-rate-info {
						width: 710rpx;
						
						.detail-rate-data {
							font-size: 28rpx;
							color: #111111;
							margin-bottom: 18rpx;
							width: 710rpx;
							height: 90rpx;
							padding: 0rpx 0 0 22rpx;
							
							.detail-rate-type {
								width: 70rpx;
								height: 54rpx;
							}
							
							.detail-rate-tip {
								width: 96rpx;
								height: 52rpx;
								margin-left: -10rpx;
								margin-right: -18rpx;
							}
							
							.detail-rate-nums {
								text-align: center;
								white-space: nowrap;
								margin: 0 22rpx;
								width: 82rpx;
								color: #FFFFFF;
								font-size: 28rpx;
							}
							
							.detail-rate-name {
								margin-right: 22rpx;
								width: 248rpx;
								color: #FFFFFF;
							}
							
							.detail-rate-txt {
								width: 152rpx;
								justify-content: space-around;
								
								.rate-txt-give {
									width: 56rpx;
									height: 28rpx;
								}
								
								.rate-txt-nums {
									margin-right: 10rpx;
									flex-shrink: 0;
									width: 96rpx;
									height: 40rpx;
								}
								.rate-txt-name {
									white-space: nowrap;
									text-align: right;
									width: 72rpx;
									color: #ffffff;
								}
							}
						}
					}

					.detail-sort-info {
						width: 700rpx;
						
						.detail-sort-box {
							font-size: 18rpx;
							color: #FFFFFF;
							width: 686rpx;
							// height: 212rpx;
							min-height: 110rpx;
							padding: 20rpx 0 8rpx 18rpx;
							margin-bottom: 20rpx;
							
							.detail-sort-cover {
								border-radius: 100%;
								margin-top: 12rpx;
								margin-left: 22rpx;
								margin-right: 18rpx;
								width: 76rpx;
								height: 76rpx;
								
								.sort-cover-img {
									border-radius: 100%;
									width: 80rpx;
									height: 80rpx;
									overflow: hidden;
								}
							}
							
							.detail-sort-data {
								width: 360rpx;
								margin-right: 18rpx;
								
								.detail-sort-name {
									.sort-name-icon {
										font-size: 22rpx;
										color: #002A69;
										width: 94rpx;
										height: 34rpx;
										margin-right: 16rpx;
									}
									.sort-name-txt {
										width: 302rpx;
										font-size: 32rpx;
									}
								}
								
								.detail-sort-sums {
									flex-wrap: wrap;
									margin-top: 16rpx;
									
									.sort-sums-txt {
										font-size: 24rpx;
										color: #FFFFFF;
										width: 130rpx;
										height: 60rpx;
										margin-bottom: 12rpx;
										margin-right: 12rpx;
									}
								}
							}
							
							.detail-sort-title {
								width: 138rpx;
								text-align: right;
								white-wrap: nowrap;
								font-size: 30rpx;
								margin-top: 22rpx;
								margin-right: 28rpx;
								color: #63FFF7;
								.sort-title-txt {
									font-size: 46rpx;
								}
							}
						}
					}

					.detail-tab-info {
						width: 100%;
						height: 58rpx;
						padding: 0 88rpx;
						color: #FFFFFF;
						font-size: 30rpx;
						margin-top: 18rpx;
						
						.detail-tab-data {
							text-align: center;
							flex: 1;
							font-size: 28rpx;
							.detail-tab-bg {
								display: none;
								bottom: 6rpx;
								left: 0;
								right: 0;
								margin: auto;
								width: 32rpx;
								height: 8rpx;
							}
							&.active {
								color: #FFFFFF;
								font-weight: bold;
								.detail-tab-bg {
									display: block;
								}
							}
						}
					}
					
					.detail-HC-info {
						width: 710rpx;
						
						.detail-HC-data {
							width: 710rpx;
							height: 144rpx;
							margin-bottom: 20rpx;
							padding: 14rpx 24rpx 0;
							
							.detail-disble-btn {
								width: 140rpx;
								height: 43rpx;
							}
							
							.detail-HC-img {
								height: 24rpx;
								font-size: 20rpx;
								color: #FFFFFF;
								background-repeat: no-repeat;
								background-size: cover;
								z-index: 100;
								left: 0rpx;
								top: 0rpx;
								width: 126rpx;
								
								.detail-HC-img-txt {
									margin-left: -12rpx;
								}
							}
							
							.info-record-detail {
								padding: 0rpx 28rpx 0;
								width: 710rpx;
								height: 112rpx;
								
								.record-sort-num {
									width: 83rpx;
									height: 42rpx;
									font-size: 22rpx;
									color: #111111;
									z-index: 100;
									left: 4rpx;
									top: 6rpx;
									
									.sort-num-txt {
										margin-left: -20rpx;
										top: -4rpx;
									}
								}
								
								.record-cover {
									width: 76rpx;
									height: 76rpx;
									margin-right: 24rpx;
									border-radius: 100%;
									
									.record-cover-img {
										width: 68rpx;
										height: 68rpx;
										overflow: hidden;
										border-radius: 100%;
									}
								}
								
								.record-name {
									width: 310rpx;
									
									.record-name-txt {
										color: #262727; 
										font-size: 32rpx;
									}
									.record-name-dates {
										color: #666666;
										margin-top: 6rpx;
										font-size: 24rpx;
									}
								}
								
								.record-award {
									width: 260rpx;
									margin-left: 24rpx;
									
									.record-award-type {
										width: 70rpx;
										height: 54rpx;
									}
									.record-award-name {
										color: #FF8B1D;
										font-size: 24rpx;
									} 
								}
							}
							
							.detail-HC-cover {
								width: 76rpx;
								height: 76rpx;
								margin-right: 28rpx;
								margin-left: 10rpx;
								border-radius: 100%;
								
								.detail-HC-cover-img {
									border-radius: 100%;
									width: 80rpx;
									height: 80rpx;
									overflow: hidden;
								}
							}
							
							.detail-HC-title {
								// width: 316rpx;
								width: 100%;
								
								.in-title-item {
									color: #262727;
									font-size: 22rpx;
								}
								
								.detail-HC-name {
									max-width: 60%;
									color: #FFFFFF;
									font-size: 32rpx;
									margin-bottom: 14rpx;
								}
								.detail-HC-dates {
									// margin-top: 6rpx;
									font-size: 20rpx;
									color: #FFFFFF;
									// margin-left: 10rpx;
								}
							}
							
							.detail-HC-type {
								margin-left: 18rpx;
								width: 248rpx;
								
								.HC-type-give {
									width: 56rpx;
									height: 30rpx;
									right: 184rpx;
									top: 10rpx;
								}
								.HC-type-nums {
									width: 70rpx;
									height: 50rpx;
								}
								.HC-type-tip {
									width: 96rpx;
									height: 52rpx;
								}
								.HC-type-name {
									color: #FFFFFF;
									font-size: 24rpx;
									font-weight: bold;
									margin-top: 14rpx;
								}
							}
						}
						
					}
				}
			}
			
			.oper-btn-box {
				bottom: 0;
				z-index: 100;
				width: 100%;
				height: 252rpx;
				
				.oper-btn-info {
					width: 170rpx;
					height: 172rpx;
					
					.oper-btn-img {
						width: 100%;
						height: 100%;
					}
					
					.oper-btn-detail {
						top: -6rpx;
						font-size: 40rpx;
						color: #63FFF7;
					}
					.oper-btn-price {
						color: #FFFFFF;
						font-size: 24rpx;
						
						.oper-btn-price-txt {
							color: #FFFFFF;
							font-size: 24rpx;
						}
						
					}
				}
				
			}

		}
	}
	
	.award-result-uppop {
		font-size: 22rpx;
		color: #111111;
		padding: 0 30rpx;
		
		.award-result-box {
			width: 670rpx;
			height: 782rpx;
			padding-top: 80rpx;
		}
	
		.award-result-btns {
			height: 70rpx;
			margin-top: 32rpx;
			
			.result-btn-img {
				width: 214rpx;
				height: 70rpx;
			}
		}
	}
	
	
	// 弹框蒙版
	.mask-view {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		background: rgba(0, 0, 0, 0.8);
		overflow: hidden;
		color: #111111;
	
		// 宝箱弹框
		.box-content {
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 750rpx;
			height: 1150rpx;
			padding: 0 25rpx;
	
			.box-content-list {
				left: 0;
				right: 0;
				top: 330rpx;
				margin: auto;
				width: 600rpx;
				height: 780rpx;
				overflow-x: hidden;
				overflow-y: auto;
				flex-wrap: wrap;
				align-content: flex-start;
				
				.bag-goods-list {
					padding: 12rpx 18rpx;
					color: #111111;
				}
					
				.content-pool-detail {
					width: 160rpx;
					margin-right: 10rpx;
					margin-bottom: 22rpx;
					
					.bag-goods-type {
						top: 6rpx;
						left: 6rpx;
						
						.bag-goods-type-img {
							height: 34rpx;
							z-index: 98;
						}
					}
					
					.content-pool-cover {
						width: 160rpx;
						height: 177rpx;
						
						.pool-cover-img {
							width: 126rpx;
							height: 130rpx;
							overflow: hidden;
						}
					}
					
					.content-pool-txt {
						width: 100%;
						height: 26rpx;
						line-height: 26rpx;
						color: #23220C;
						font-size: 26rpx;
						text-align: center;
						margin-top: 6rpx;
					}
					
					.content-item-price {
						margin-top: 4rpx;
						font-size: 24rpx;
						color: #88875A;
						text-align: center;
					}
					
					.content-item-rate {
						margin-top: 4rpx;
						font-size: 24rpx;
						color: #D56E28;
						text-align: center;
					}
						
				}
				
			}
	
			.box-close-box {
				left: 0;
				right: 0;
				bottom: -100rpx;
				margin: auto;
				width: 100rpx;
				height: 100rpx;
				text-align: center;
			}
		}
		
	}
	
</style>
